<template>
	<view class="">
		<view class="navber">
			<view class="navbar-box" :style="{backgroundColor: 'rgba(250,250,250,'+opacityNum+')'}">
				<view class="navbar-left" @click="Goback">
					<u-icon name="arrow-left" size="34" :style="{color:color}"></u-icon>
				</view>
				<view class="navbar-right">
					<view class="message-box right-item">
						<u-icon name="more-dot-fill" size="34"></u-icon>
					</view>
				</view>
			</view>
			<view class="navbar-camera">
				<view class="navbar-text">
					<u-icon name="camera" size="28" style="margin-right: 10rpx;"></u-icon>设置封面
				</view>
			</view>
		</view>

		<view class="personal-top">
			<view class="personal-col">
				<view class="personal-img">
					<image :src="personalData.logo" mode="widthFix"></image>
					<view class="personal-ico">
						<u-icon name="plus" color="#fff" size="30"></u-icon>
					</view>
				</view>
				<view class="personal-warp">
					<view class="personal-name">
						{{personalData.nickname}}
					</view>
					<view class="personal-data">
						<view class="personal-cont">
							<text>关注</text><text>3</text>
						</view>
						<view class="personal-cont">
							<text>收藏</text><text>1</text>
						</view>
						<view class="personal-cont">
							<text>转评赞</text> <text>10</text>
						</view>
					</view>
				</view>
			</view>
			<view class="personal-intro">
				“{{personalData.signnature||"这人很懒什么也没留下！"}}”

			</view>
			<view class="personal-means">
				<view class="personal-cont-box">
					<u-icon name="man" color="#5182fb" size="24"></u-icon>35岁

				</view>
				<view class="personal-cont-box">
					南阳
				</view>
				<view class="personal-cont-box">
					<image
						src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61cbd4765a7e3f03107a788e/61cc17d491fca60011d62654/16412630035064666115.png"
						mode="widthFix" />清华大学
				</view>
			</view>
			<view class="personal-btn">
				<view class="personal-cont-btn">
					发私信
				</view>
				<view class="personal-cont-btn">
					取消关注
				</view>
				<view class="personal-cont-btn-up">
					<image
						src="https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/61cbd4765a7e3f03107a788e/61cc17d491fca60011d62654/16412630066539677345.png"
						mode="widthFix" />
				</view>
			</view>
			<view class="personal-tabs">
				<u-tabs :list="list" :is-scroll="false" :current="current" @change="change" active-color="#c40200"
					:bar-height="4" :bar-width="50"></u-tabs>
			</view>
			<u-gap height="15" bg-color="rgb(247, 247, 247)"></u-gap>
			<view class="personal-content">
				<view class="personal-text" v-if="current==3">
					<u-section title="我关注的" sub-title="综合排序" :show-line="false" :bold="false" color="#808080"
						style="padding: 20rpx 30rpx;"></u-section>
					<view class="personal-gz-list">
						<view class="personal-gz-img">
							<image
								src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61cbd4765a7e3f03107a788e/61cc17d491fca60011d62654/16412630038426860212.png"
								mode="widthFix" />
						</view>
						<view class="personal-gz-data">
							<view class="personal-gz-name">
								来罐冰淇淋
							</view>
							<view class="personal-gz-label">
								<text>建筑界大佬</text> <text>知名建筑师</text>
							</view>
							<view class="personal-gz-brief">
								简介：两米八的娱乐圈小仙女们~~
							</view>
						</view>
						<view class="personal-gz-section">
							<u-icon name="checkmark" size="26" style="margin-right: 10rpx;"></u-icon>已关注
						</view>
					</view>

					<view class="personal-gz-list">
						<view class="personal-gz-img">
							<image
								src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61cbd4765a7e3f03107a788e/61cc17d491fca60011d62654/16412630044247198496.png"
								mode="widthFix" />
						</view>
						<view class="personal-gz-data">
							<view class="personal-gz-name">
								嵩嵩的高山
							</view>
							<view class="personal-gz-label">
								<text>建筑界大佬</text>
							</view>
							<view class="personal-gz-brief">
								“一手掌握，工程圈最新资讯！”
							</view>
						</view>
						<view class="personal-gz-section1">
							<u-icon name="plus" size="26" style="margin-right: 10rpx;"></u-icon>关注
						</view>
					</view>
				</view>
				<view class="personal-gcq-warp" v-if="current==1">
					<view class="personal-gcq-list" v-for="(item,index) in gcqData" :key="index" @click="GOcircle(item.id)">
						<view class="personal-gcq-img">
							<image :src="$baseUrl+item.dkmrtp" mode="scaleToFill"></image>
						</view>
						<view class="personal-gcq-text">
							<view class="personal-gcq-title">
								{{item.title}}
							</view>
							<view class="personal-gcq-cent">
								125阅读
							</view>
						</view>
					</view>
				</view>

				<view class="personal-gcq-warp" v-if="current==2">
					<view class="personal-gcq-list" v-for="(item,index) in gzData" :key="index" @click="goDetail(item)">
						<view class="personal-gcq-img">
							<image :src="$baseUrl+item.img" mode="scaleToFill"></image>
						</view>
						<view class="personal-gcq-text">
							<view class="personal-gcq-title">
								{{item.title}}
							</view>
							<view class="personal-gcq-cent">
								125阅读
							</view>
						</view>
					</view>
				</view>
			</view>

		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '推荐',
				}, {
					name: '工程圈',
				}, {
					name: '收藏'
				}, {
					name: '关注'
				}, ],
				data: [],
				current: 3,
				sysMemID: 0,
				personalData: {},
				gcqData: [],
				gzData: [],
				$baseUrl: "",
				top:0,
				scrollTop:0,
				opacityNum:0,
				color:"",
			}
		},
		async onLoad(options) {
			this.sysMemID = options.sysMemID
			await this.GoPersonal()
			this.$baseUrl = this.baseUrl
		},
		onPageScroll(e) {
			// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
			this.scrollTop = e.scrollTop
			if(this.top/4>this.scrollTop){
				this.opacityNum = 0
				this.color="#fff"
			}else if(this.top/3>this.scrollTop){
				this.opacityNum = 0.5
				this.color="rgb(96, 98, 102)"
			} else if(this.top/2>this.scrollTop){
				this.opacityNum = 0.7
				this.color="rgb(96, 98, 102)"
			}else if(this.top>this.scrollTop){
				this.opacityNum = 0.9
				this.color="rgb(96, 98, 102)"
			}else if(this.scrollTop>this.top){
				this.opacityNum = 1
				this.color="rgb(96, 98, 102)"
			}
		},
		methods: {
			change(index) {
				this.current = index;
			},
			async GoPersonal() {
				let _this = this
				let params = {
					cmd: 'mMember_query_proc_memberpage',
					ak: this.$store.state.token,
					para: {
						MemberID: this.sysMemID
					}
				}
				const res = await this.$u.api.getDram(params)
				this.personalData = res.Data
				this.gcqData = res.Data.Datas3
				this.gzData = res.Data.Datas4
				
				const query = uni.createSelectorQuery().in(this);
				query.select('.personal-top').boundingClientRect(data => {
					this.top=data.top
				}).exec();
			},
			Goback(){
				uni.navigateBack({
					delta: 1
				})
			},
			GOcircle(id){
				this.$u.route("/pages/circle/circle-detail/circle-detail",{
					id:id,
				})
			},
			goDetail(item){
				
				let _this = this5
					switch (item.spageid){
						case "3309": _this.$u.route('', {id: item.skeyid});break;
						case "3314": _this.$u.route('/pages/HomeLnner/DeviceDetails/DeviceDetails', {id: item.skeyid});break;
						case "2153": _this.$u.route('/pages/circle/circle-detail/circle-detail', {id: item.skeyid});break;
						case "3307": _this.$u.route('/pages/index/homeInfo-detail/homeInfo-detail', {id: item.skeyid});break;
						case "3305": _this.$u.route('/pages/HomeLnner/AtlasDetails/AtlasDetails', {id: item.skeyid});break;
						case "3310": _this.$u.route('/pages/HomeLnner/PracticeDetails/PracticeDetails', {id: item.skeyid});break;
						case "3312": _this.$u.route('', {id: item.skeyid});break;
						case "3315": _this.$u.route('', {id: item.skeyid});
					}
			}
		}
	}
</script>

<style scoped lang="scss">
	/deep/ .uicon-arrow-left:before {
	    content: "\e683";
			font-size: 40rpx;
	}
	.navber {
		.navbar-box {
			position: fixed;
			top: 88rpx;
			left: 0;
			padding: 22rpx 30rpx;
			z-index: 1000;
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100vw;
			// #ifdef H5
			top:0
			// #endif
		}
	
		position: relative;
		padding: 0 0rpx 400rpx;
		color: rgb(255, 255, 255);
		font-size: 22rpx;
		line-height: 21rpx;
		white-space: nowrap;
		background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61cbd4765a7e3f03107a788e/61cc17d491fca60011d62654/16412630016503231780.png');
		background-size: cover;
		background-repeat: no-repeat;
		height: auto !important;
	}

	/deep/.uicon-arrow-right:before {
		content: "\e616";
	}

	.right-item {
		/deep/.u-icon {
			background-color: rgba(0, 0, 0, 0.3);
			width: 42rpx;
			height: 42rpx;
			border-radius: 50%;
			justify-content: center;
		}
	}

	.navbar-camera {
		position: absolute;
		bottom: 100rpx;
		right: 30rpx;
		padding: 14rpx 24rpx;
		background-color: rgba(0, 0, 0, 0.4);
		border-radius: 26rpx;

		.navbar-text {
			display: flex;
			align-items: center;
		}
	}

	.personal-top {
		position: absolute;
		width: 100vw;
		left: 0;
		z-index: 999;
		padding: 30rpx 0rpx 20rpx;
		background-color: rgb(255, 255, 255);
		border-radius: 32rpx 32rpx 0px 0px;
		margin-top: -32rpx;

		.personal-col {
			display: flex;
			margin-bottom: 20rpx;
			padding: 0 30rpx;

			.personal-img {
				background: #fff;
				border-radius: 50%;
				padding: 6rpx;
				margin-top: -60rpx;
				position: relative;
				margin-right: 30rpx;

				.personal-ico {
					position: absolute;
					bottom: 10rpx;
					right: 10rpx;
					width: 44rpx;
					height: 44rpx;
					border-radius: 50%;
					text-align: center;
					line-height: 40rpx;
					background: #c40200;
					border: 4rpx solid #fff;
				}

				image {
					width: 138rpx;
					height: 138rpx;
					border-radius: 50%;
				}
			}

			.personal-warp {
				.personal-name {
					font-size: 32rpx;
					margin-bottom: 20rpx;
				}

				.personal-data {
					display: flex;

					.personal-cont {
						&::after {
							display: inline-block;
							content: '';
							height: 20rpx;
							line-height: 20rpx;
							width: 2rpx;
							background-color: rgb(153, 153, 153);
							margin: 0 20rpx;
						}

						&:last-child {
							&::after {
								display: none;
							}
						}

						text {
							font-size: 24rpx;

							&:first-child {
								margin-right: 10rpx;
								color: rgb(153, 153, 153);
							}

						}
					}
				}
			}
		}

		.personal-intro {
			padding: 0 30rpx;
			margin-bottom: 20rpx;
		}

		.personal-means {
			padding: 0 30rpx;
			display: flex;

			.personal-cont-box {
				display: flex;
				align-items: center;
				margin-right: 20rpx;
				padding: 4rpx 8rpx;
				color: rgb(51, 51, 51);
				font-size: 24rpx;
				background-color: rgb(245, 245, 245);
				border-radius: 7rpx;

				/deep/.u-icon {
					margin-right: 8rpx;
				}

				image {
					width: 22rpx;
					height: 22rpx;
					margin-right: 8rpx;
				}
			}
		}

		.personal-btn {
			padding: 0 30rpx;
			margin-top: 30rpx;
			display: flex;

			.personal-cont-btn {
				color: rgb(0, 0, 0);
				flex: 1;
				padding: 16rpx 0rpx;
				background-color: rgb(240, 238, 239);
				border-radius: 5rpx;
				margin-right: 16rpx;
				font-size: 28rpx;
				text-align: center;
			}

			.personal-cont-btn-up {
				color: rgb(0, 0, 0);
				background-color: rgb(240, 238, 239);
				border-radius: 5rpx;

				image {
					display: flex;
					width: 70rpx;
					height: 70rpx;
				}
			}
		}

		.personal-content {
			.personal-text {
				.personal-gz-list {
					display: flex;
					justify-content: space-between;
					padding: 30rpx 20rpx;
					border-bottom: solid 2rpx rgb(235, 235, 235);

					.personal-gz-img {
						image {
							width: 108rpx;
							height: 108rpx;
						}
					}

					.personal-gz-data {
						flex: 1;
						margin-left: 27rpx;

						.personal-gz-name {
							color: rgb(51, 51, 51);
							font-size: 32rpx;
						}
					}

					.personal-gz-label {
						font-size: 22rpx;
						margin: 16rpx 0;

						text {
							padding: 6rpx 10rpx 6rpx;
							background-color: rgb(247, 247, 247);
							border-radius: 7rpx;
							margin-right: 10rpx;

							&:last-child {
								background-color: rgb(255, 238, 238);
								color: rgb(232, 67, 66);
							}
						}
					}

					.personal-gz-brief {
						color: rgb(153, 153, 153);
						font-size: 22rpx;
					}
				}

				.personal-gz-section {
					margin-left: 49rpx;
					margin-top: 9rpx;
					padding: 15rpx;
					color: rgb(102, 102, 102);
					font-size: 24rpx;
					line-height: 22rpx;
					border-radius: 26rpx;
					height: 55rpx;
					border: solid 2rpx rgb(204, 204, 204);
				}

				.personal-gz-section1 {
					padding: 15rpx 26rpx 14rpx 27rpx;
					margin-left: 49rpx;
					margin-top: 9rpx;
					color: rgb(196, 2, 0);
					font-size: 24rpx;
					line-height: 22rpx;
					white-space: nowrap;
					border-radius: 26rpx;
					height: 55rpx;
					border: solid 2rpx rgb(196, 2, 0);
				}
			}

			.personal-gcq-warp {
				.personal-gcq-list {
					display: flex;
					justify-content: flex-start;
					padding: 30rpx 20rpx;
					border-bottom: solid 2rpx rgb(235, 235, 235);

					.personal-gcq-img {
						width: 200rpx;
						height: 160rpx;
						overflow: hidden;
						image {
							display: flex;
							border-radius: 5rpx;
							width: 200rpx;
							height: 160rpx;
						}
					}

					.personal-gcq-text {
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						margin-left: 30rpx;

						.personal-gcq-title {
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 3;
							-webkit-box-orient: vertical;
						}

						.personal-gcq-cent {
							color: rgb(153, 153, 153);
							font-size: 24rpx;
						}
					}
				}
			}
		}
	}
</style>
